<!doctype html>
<html>
<head>
	<title>表单节点的获取</title>
	<meta  charset='utf-8'/>
	<style type="text/css">
		table,td{border-collapse:collapse;}
		td{padding:10px;}
		#top{width:200px;height:200px;border:solid 2px #333;}
	</style>
</head>
<body>
	<center>	
	<div>
		<form action="" method ='post' enctype="multipart/form-data" >
			<table border='1'>
				<tr>
					<td>用户名:</td><td><input type='text' name='username' title='username' value='iloveyou'/></td>
				</tr>
				<tr>
					<td>密码:</td><td><input type='password' name='passworde' title='password'/></td>
				</tr>
				<tr>
					<td>确认密码:</td><td><input type='password' name='Conpassworde' /></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<input type='radio' name='sex' value='女'/>女 
						<input type='radio' name='sex' value='男' checked="checked"/>男
					</td>
				</tr>
				<tr>
					<td>兴趣爱好</td><td>
					<input type='checkbox' name='hobby[]' value='篮球' checked="checked"/>篮球 
					<input type='checkbox' name='hobby[]' value='足球' checked="checked"/>足球
					<input type='checkbox' name='hobby[]' value='排球' />排球
					<input type='checkbox' name='hobby[]' value='yoyo' />yoyo
					</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
						<select name='city'>
							<option value='北京'>北京</option>
							<option value='天津' selected="selected">天津</option>
							<option value='上海'>上海</option>
							<option value='重庆'>重庆</option>
						</select>	
					</td>
				</tr>
				<tr>
					<td>个人介绍</td>
					<td>
						<textarea name='intro' style='resize:none'>hello world</textarea>
					</td>
				</tr>
				<tr>
					<td>头像</td>
					<td>
						<input type='file' name='portrait' />
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type='hidden' name='vcode'>
						<input type='submit' value="提交" />
						<input type='reset' value="重置"/>
						<button>点击</button>
						<button>请点击</button>
					</td>
				</tr>
			</table>	
		</form>
	</div>
	</center>
	
	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>

	<script type="text/javascript">

	//获取元素
	// $('input[name]').css('border','solid 2px blue');
	// $('input[name=username]').css('border','dashed 2px green');
	// $('input[name!=username]').css('border','solid 2px blue');
	// $('input[name^=u]').css('border','solid 2px blue');
	//$('input[name$=e]').css('border','solid 2px blue');

	//$('input[type=text][name=username][title=username]').css('width','300px')
	// $('input[name*=pass]').css('width','300px'); 


	//获取form表单元素
	// $(':input').css('margin-left','50px');
	// $(':text').css('border','solid 2px blue');
	// $(':password').css('width','300px');
	// $(':radio').css('marginLeft','100px');
	// $(':checkbox').css('marginLeft','50px');
	// $(':file').css('border','solid 2px blue');
	// $(':submit').css('border','solid 2px blue');
	// $(':reset').css('border','solid 2px blue');
	// $(':button').css('border','solid 2px green');

	//获取值设置值  .value
	var v = $(':text').val();
	// 设置值
	$('input[name=username]').val('hello world');
	//alert(v);

	// 单选框
	//获取值
	var sexs = $('input[name=sex]:checked').val();
	//设置值
	$('input[name=sex][value=女]').attr('checked','checked');

	//多选  each 每一个的意思
	// var che = $('input[name="hobby[]"]:checked').val()

	var arr = [];
	$('input[name="hobby[]"]:checked').each(function(){

		arr.push($(this).val());
	})

	console.log(arr);

	//下拉框
	//获取
	var val = $('select[name=city]').val();
	//设置
	$('select[name=city]').val('上海');
	///alert(val);

	//文本域
	//获取值
	var texts = $('textarea[name=intro]').val();
	//设置值
	$('textarea').val('今天星期四,不开心');
	// alert(texts);


	//文件上传
	var file = $(':file').val();

	console.log(file);

	</script>
</body>
</html>